<template>
	<view class="SearchByKey">

		<!-- 搜索结果 -->
		<navigator url="/pages/SearchMusic/SearchMusic">
			<view class="search flex-center">
				<uni-icons type="search" color="#7a7a7a" size="1.5em"></uni-icons>
				<view>{{key}}</view>
			</view>
		</navigator>
		<Transition enter-active-class="animate__animated animate__fadeIn">
			<view class="list" v-show="data.song.list.length!==0">
				<view v-for="(item,index) in data.song.list" :key="index" @click="getMusicPlay(item.songmid)">
					<view :class="{focusSong:globalData.data.value.songmid==item.songmid}"
						v-html="item.songname_hilight"></view>
					<view>{{item.singer[0].name}}</view>
				</view>
			</view>
		</Transition>
		<AudioPlayer></AudioPlayer>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		computed,
		ref
	} from "vue";
	import {
		GetSearchByKey,
		GetMusicPlay
	} from "@/utils/MusicAPI.js"
	//存放要搜索的字符串
	const key = ref("")
	onLoad((data) => {
		key.value = data.key
		getSearchByKey(key.value)
	})
	// 存放搜索结果
	const data = ref({
		"keyword": "测试",
		"priority": 0,
		"qc": [],
		"semantic": {
			"curnum": 0,
			"curpage": 2,
			"list": [],
			"totalnum": 0
		},
		"song": {
			"curnum": 10,
			"curpage": 2,
			"list": [],
			"totalnum": 511
		},
		"tab": 0,
		"taglist": [],
		"totaltime": 0,
		"zhida": {
			"type": null
		}
	})



	// 获取搜索结果
	const getSearchByKey = (key) => {
		GetSearchByKey(key).then(res => {
			data.value = res.data.response.data
		}).catch(err => {
			console.log("获取搜索结果失败", err)
		})
	}
	const MusicPlayUrl = ref("")
	//获取歌曲播放链接
	const getMusicPlay = (songmid) => {
		GetMusicPlay(songmid).then(res => {
			MusicPlayUrl.value = res.data.data.playUrl[songmid].url
			if (MusicPlayUrl.value == "") {
				uni.showToast({
					icon: "none",
					title: "此歌曲吗有播放链接呢试试其他的吧 (●'◡'●)",
				});

			} else {
				toMusicPlay(MusicPlayUrl.value, songmid)
			}
		}).catch(err => {
			console.log("获取歌曲播放链接", err)
		})
	}
	const globalData = getApp().globalData

	//跳转音乐播放页
	const toMusicPlay = (playUrl, songmid) => {
		const data = getApp().globalData.data
		data.value.playUrl = playUrl
		data.value.songmid = songmid
		uni.navigateTo({
			url: "/pages/MusicPlay/MusicPlay"
		})
	}
</script>

<style scoped>
	.SearchByKey {
		padding: 0 10rpx;
		padding-bottom: 100rpx;
		color: #dddddd;
	}



	.search>view {
		max-width: 90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list>view {
		margin: 20rpx 10rpx;
	}

	.list>view>view:nth-child(2) {
		text-indent: 1em;
		color: #7a7a7a;
	}
</style>